<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
      integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
      crossorigin=""
    />
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script
      src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
      integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
      crossorigin=""
    ></script>
    <title>Document</title>
  </head>
  <body>
    <div
      id="map"
      style="height: 500px; width: 900px"
    ></div>
    <script>
      var map = L.map('map').setView([51.505, -0.09], 8);
      // 基础层
      var osm = L.tileLayer(
        'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}',
        {
          maxZoom: 18,
          attribution: '© AutoNavi',
        }
      );
      // 覆盖层 标记设置为图层分组
      var lundun = L.marker([51.4506, -0.04994]);
      var jianqiao = L.marker([52.1975, 0.1263]);
      var niujin = L.marker([51.7542, -1.219]);
      var cities = L.layerGroup([lundun, jianqiao, niujin]);
      // 创建两个对象，分别包含基础层、覆盖层
      var overlayMaps = {
        Markers: cities,
      };
      var baseMaps = {
        OpenStreetMap: osm,
      };
      // 添加控件 --控制图层显示
      var layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map);
    </script>
  </body>
</html>
